﻿
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>交易中心</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/animation.css">
	<link rel="stylesheet" href="css/light7.min.css">
	<link rel="stylesheet" href="css/light7-swipeout.css">
	<link rel="stylesheet" href="css/light7-swiper.min.css">
	<link rel="stylesheet" href="css/wap_style.css">
	<link rel="stylesheet" href="pub/common.css">
	<script type='text/javascript' src='js/jquery-3.3.1.min.js' charset='utf-8'></script>
	<script type="text/javascript">
		var base_url = "http://www.jiaoyi.com/"
	</script>
</head>
<style>
	.div_section1{
		background: rgba(0,0,0,0.4);
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: none;
	}
	.div_section1 .div_section1_1{
		width: 80%;
		margin: 0 auto;
		background: #fff;
		border-radius: 0.5rem;
		padding: 30px 0px;
		margin-top: 48%;
	}
	.div_section1 .div_section1_1 .a1{
		text-align: right;
	}
	.div_section1 .div_section1_1 .a1 img{
		width: 1rem;
		height: 1rem;
		margin-right: 1rem;
	}
	.div_section1 .div_section1_1 .a2{
		text-align: center;
	}
	.div_section1 .div_section1_1 .a2 .p1{
		font-size: 1rem;
		margin-top: .2rem;
		margin-bottom: 1rem;
		color: #7d63e2;
	}
	.div_section1 .div_section1_1 .a3{
		margin: 0 auto;
		width: 90%;
	}
	.div_section1 .div_section1_1 .a3 input{
		width: 100%;
		border: 1px solid #d5d4db
		background: transparent;
		width: 100%;
		text-align: left;
		padding: 0;
		display: block;
		height: 2rem;
		line-height: 2rem;
		padding-left: 0.5rem;
		color: #505050;
		font-size: .9rem;
		font-weight: normal;
	}
	.div_section1 .div_section1_1 .a4{
		margin: 0 auto;
		width: 80%;
	}
	.div_section1 .div_section1_1 .a4 input{
		background: linear-gradient(to right, #023293, #023293);
		border: 0;
		display: block;
		width: 100%;
		margin: 0 auto;
		height: 2.3rem;
		border-radius: 1.15rem;
		color: #fff;
		font-size: 0.935rem;
		margin-top: 1.3rem;
		line-height: 2.3rem;
		text-align: center;
	}
</style>
<style>
	.trade_index .header-content {
		color: #fff;
		padding-top: 1.6rem;
		font-size: .65rem;
		line-height: 1.25rem
	}
	.trade_index .header-img {
		height: 8.2rem
	}

	.trade_index .header-content .info {
		padding: .25rem 0 0 0;
	}

	.trade_index .current-price {
		padding-left: 1rem
	}

	.trade_index .price {
		font-size: 1.25rem
	}

	#trade_chart {
		background-color: #FFF !important;
		padding: .5rem 0 .5rem 0
	}

	.trade_index .buy_sell {
		margin-top: .5rem;
		background-color: #fff;
	}

	.trade_index .buy_sell .list-block {
		font-size: .70rem
	}

	.trade_index .buy_sell .list-block input {
		border: 1px solid #E8E8E8;
		border-radius: .25rem;
		font-size: .70rem
	}

	.buy_sell .click-btn {
		margin-top: .25em
	}

	.list-item {
		padding: .5rem 0;
		position: relative
	}

	.hidden {
		display: none;
	}
	.page1{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: #efeff4;
	}
</style>
<body>
<div class="page1" id="trade_index">

	<header class="bar bar-nav l-bar l-color">
		<a class="external icon pull-left return-icon back" href="{:url('user/Index/index')}">
			<img src="picture/return_gray.png" width="100%">
		</a>
		<a class="external icon header-right icon-menu" href="{:url('deal_way')}">
		</a>
		<h1 class="header-title">交易</h1>

	</header>
	<div class="content transfer-content trade_index infinite-scroll  pull-to-refresh-content">
		<div class="pull-to-refresh-layer">
			<div class="preloader"></div>
			<div class="pull-to-refresh-arrow"></div>
		</div>
		<div class="header ">
			<img class="header-img" src="picture/home-banner.jpg">
			<div class="header-content row ">
				<div class="col-40 current-price">
					<div>当前价</div>
					<div style="line-height: 2rem">
						<span class="price ellipsis" render="price">{$data.current.price}</span>
						<span>FYC</span>
					</div>
				</div>

			</div>
		</div>
		<div id="main" style="height: 12rem;margin-top: 10px; background-color: #fff"></div>
		<div class="buy_sell">
			<div class="content-box" style="padding-bottom: 0">
				<div class="buttons-tab login-tab">
					<a href="#trade_tab1" class="tab-link active button">买入</a>
					<a href="#trade_tab2" class="tab-link button">卖出</a>
				</div>
				<div class="list-block row" style="margin-top: -1rem;">
					<div class="tabs login-tabs">
						<div id="trade_tab1" class="tab active">
							<form class="content-block layui-form" onsubmit="return false">
								<!--<div>可用：0.00 CTH</div>-->
								<input class="hidden" name="s" value="TrandBuy.DoBuy">
								<input class="hidden" name="root" value="deal/Index/buy_order">
								<div class="row" style="padding: .5rem 0;">
									<div class="col-50">
										<input data-name="buy" id="buys" type="number" autocomplete="off"
											   lay-verify="require|number" name="num" value="" placeholder="请输入购买数量"/>
									</div>
									<div class="col-50">
										<input type="number" name="price" render="price" value="{$data.current.price}" placeholder="请输入购买价格"
											   readonly/>
									</div>
								</div>
								<div style="padding-left: .25rem">预计：<span id="buy_predict" render="buy_predict">0.00</span></div>
								<button class="click-btn buy-btn" data-title="请输入安全密码"
										data-name="safepassword" lay-submit="" lay-filter="prompt">买入
								</button>
							</form>
						</div>

						<div id="trade_tab2" class="tab">
							<form class="content-block layui-form" onsubmit="return false">
								<input class="hidden" name="s" value="TrandShop.DoInfo">
								<input class="hidden" name="root" value="deal/Index/sell_order">
								<div style="padding-left: .25rem">可用：<span render="fyc">{$data.balance}</span> </div>
								<div class="row" style="padding: .5rem 0">
									<div class="col-50">
										<input data-name="shop" type="number" id="sells" autocomplete="off" lay-verify="require|number" name="num" value="" placeholder="请输入卖出数量"/>
									</div>
									<div class="col-50">
										<input type="number" name="price" render="price" value="{$data.current.price}" placeholder="请输入卖出价格" readonly/>
									</div>
								</div>
								<div style="padding-left: .25rem">预计收入：<span id="shop_predict" render="shop_predict">0.00</span>&emsp;<span render="beishu">{$data.config.multiple}</span>倍，最高<span render="jy_limit">{$data.config.number_max}</span></div>
								<button class="click-btn sell-btn" data-title="请输入安全密码" data-name="safepassword" lay-submit="" lay-filter="prompt">卖出
								</button>
							</form>
						</div>

					</div>
				</div>
			</div>
		</div>
		<div class="page" style="display: none"></div>
		<div class="buy_sell">
			<div class="content-box">
				<div class="buttons-tab login-tab data zhuang_x">
					<a class="external tab-item active button" data-type="0"
					   data-s="TrandBuy.ListData" id="buylist" data-root="wallet/c2c/buy/lists">买入</a>
					<a class="external tab-item button" id="selllist" data-type="1"
					   data-s="TrandShop.ListData" data-root="wallet/c2c/sell/lists">卖出</a>
				</div>
				<div class="list-block row" style="">
					<div class="tabs login-tabs">
						<div class="tab active" id='buytop' style="height: 430px">
							<div class="section" id="buyorder" style="min-height: 450px; position:absolute;top:50px;left:0px;right:0px;bottom:51px;padding:0 10px;overflow:auto;">
							</div>
						</div>
						<div class="tab active" id='selltop' style="display: none; height: 430px">
							<div class="section" id="sellorder" style="min-height: 450px; position:absolute;top:50px;left:0px;right:0px;bottom:51px;padding:0 10px;overflow:auto;">
								
							</div>
						</div>
						<div class="infinite-scroll-preloader" id="jiazai" style="display: none;"><div class="preloader"></div></div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<script type="text/html" id="trade_index_tpl">
		
	</script>
	<script>
		$(function(){
			$(".zhuang_x a").click(function(){
				var dd = $(this).index();
				$(".zhuang_y .list-item").eq(dd).show().siblings().hide();
			})
			$(".open-popup").click(function(){
				$(".div_section1").show();
			})
			$(".close_btn_x").click(function(){
				$(".div_section1").hide();
			})
		})
	</script>
	

</div>
<div class="div_section1">
	<div class="div_section1_1">
		<div class="a1">
			<img src="picture/pop_close.png" alt="" class="close_btn_x">
		</div>
		<div class="a2">
			<p class="p1">请输入安全密码</p>
		</div>
			<div class="a3">
				<input type="password" id="passwords" placeholder="请输入安全密码">
			</div>
			<div class="a4">
				<input type="submit" id="bsorder" value="确认购买">
			</div>
	</div>
</div>
<link rel="stylesheet" href="pub/common.css">
<script type="text/javascript" src="pub/alertPopShow.js" charset='utf-8'></script>
<script type='text/javascript' src='js/light7.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/light7-swiper.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/light7-swipeout.js' charset='utf-8'></script>
<script type='text/javascript' src='js/cn.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/layui.js' charset='utf-8'></script>
<script type='text/javascript' src='js/basis.js' charset='utf-8'></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
</body>
<script type="text/javascript" id="trade_index_script">
		// setTimeout(function(){
		$(function(){

			layui.loadPage({
				trade_index: function (id) {
					//
					var data = $.Get(), $this = this, price = 0, basis = this.basis();
					var obj = {
						getData: function ($data) {


							$this.pageLoad($data, id, function (d) {

								for(i in d.rows){
									d.rows[i].type = $data.type
								}
								console.log(d);
								return $.t7.compile($('#trade_index_tpl').html())(d);
							});
						},
						getPrice: function () {
							$this.sendAjax({
								s: 'TrandBuy.GetPrice',
								root: 'wallet/c2c/price/current'
							}, function (d) { //获取当前价格
								d.fyc = d.fyc_amount;
								d.beishu = d.trade_config.basenum
								d.jy_limit = d.trade_config.tradelimit
								price = d.price;
								$this.renderHtml(id, d);
							});
						}
					};
					//
					//加载订单、价格
					obj.getPrice();
					var data = $('#' + id + ' .data .active').data();
					data.page = 1;
					data.count = 10;
					obj.getData(data);
					//
					//选择查看可买入、卖出订单
					$('#' + id + ' .data .button').off('click').on('click', function () {
						var result = $(this).data();
						result.page = 1;
						result.count = 10;
						obj.getData(result);
					});

					//价格图
					layui.use('echarts', function () {

						var chart = layui.echarts;
						$this.sendAjax({
							s: 'TrandPrice.PriceData',
							root: 'wallet/c2c/price/trend'
						}, function (d) { //获取当前价格
							 chart.set(d.xy.x, {'价格': d.xy.y}, '价格趋势', 'line', 'trade_chart', {toolbox: {}});
						});

					});

					//卖出回调
					$('#trade_index .sell-btn').data('remote', function (d) {
						console.log(d);
						var result = $('#' + id + ' .data .active').data();
						result.offset = 0;
						obj.getPrice();
						obj.getData(result);
					}).data('errRemote', function (d) {
						console.log(d);
						if (d.status == '0001' && d.msg =="您没有可用的收款账号") {
							$.router.loadPage('../receipt/view.html');
						}
					});



					//买入回调
					$('#trade_index .buy-btn').data('remote', function (d) {
						var result = $('#' + id + ' .data .active').data();
						result.offset = 0;
						obj.getData(result);
					});

					//预计价格/收入
					$('#' + id + ' input[name="num"]').off('input propertychange').on('input propertychange', function (d) {
						var value = {};
						var name = $(this).data('name') + '_predict';
						value[name] = $(this).val() * price;
						if (value == '') {
							value[name] = 0.00;
						}
						value[name] = value[name].toFixed(2);
						$this.renderHtml(id, value);
					});

				}
			});
		})

		// },300)





	</script>
<script type="text/javascript">
	var price = {$data.current.price}, buyid = 0,sellid = 0,off_on_by = true,off_on_sell = true;
	$(function(){
		$("#buys").on("input",function(e){
			num = accMul(e.delegateTarget.value,price);
			$('#buy_predict').html(num);
		});
		$("#sells").on("input",function(e){
			num = accMul(e.delegateTarget.value,price);
			$('#shop_predict').html(num);
		});
		$('#buylist').click(function(event) {
			off_on_sell = true;
			sellid = 0;
			$('#buytop').show();
			$('#selltop').hide();
			$('#sellorder').html('');
			$.ajax({
				type:'post',
				url : "{:url('get_buy_order')}",
				data:{num:buyid},
				cache:false,
				dataType:'JSON',
				success:function(data){
					buyid++;
					var html = '';
					if(data.length != 0){
						$.each(data,function(index, el) {
							html += '<div class="list-item bottom-line">'
								 +	'<div class="hanging" style="align-items:center">'
								 +		'<img class="logo" style="width: 50px;border-radius: 25px;height: 50px" src="'+el.avatar+'">'
								 +		'<div class="hanging-body ellipsis" style="padding: 0 .5rem">'
								 +			'<div class="ellipsis">'
								 +				'<div style="">'+el.nickname+'</div>'
								 +				'<div style="font-size: .65rem;color: #7e7e7e">数量：'+el.money+' 单价'+el.price+'</div>'
								 +				'<div style="font-size: .65rem;color: #7e7e7e">时间：'+el.addtime
								 +			'</div>'
								 +		'</div>'
								 +		'</div>'
								 +		'<div style="text-align: center">'
								 +			'<div class="blue-text">￥'+el.total+'</div>'
								 +			'<div class="click-btn small in-block blue dealbs" onclick="" data-id='+el.id+' data-type='+el.b_or_s+'>'
								 +				'卖出'
								 +			'</div>'
								 +		'</div>'
								 +	'</div>'
								 +	'</div>'
								 + '</div>';
						});
						if(data.length<6){
							$('#jiazai').hide();
							html+='<div class="infinite-scroll-preloader"><fieldset style="border: none;border-top: 1px solid #e8e8e8 ;margin: 0 20px; "><legend style="padding: 0 10px">已经到底了</legend></fieldset></div>';
						}else{
							$('#jiazai').show();
						}
						off_on_by = true;
						$('#buyorder').append(html);
					}else{
						$('#buyorder').append(html);
						$('#jiazai').hide();
						webToast('没有啦');
					}
				},
				error:function(e){
					webToast('没有啦');
				},
				beforeSend:function(e){
					
				}
			});
		});
		$('#buylist').click();
		$('#selllist').click(function(event) {
			off_on_by = true;
			buyid = 0;
			$('#selltop').show();
			$('#buytop').hide();
			$('#buyorder').html('');
			$.ajax({
				type:'post',
				url : "{:url('get_sell_order')}",
				data:{num:sellid},
				cache:false,
				dataType:'JSON',
				success:function(data){
					console.log(data)
					sellid++;
					var html = '';
					if(data.length != 0){
						$.each(data,function(index, el) {
							html += '<div class="list-item bottom-line">'
								 +	'<div class="hanging" style="align-items:center">'
								 +		'<img class="logo" style="width: 50px;border-radius: 25px;height: 50px" src="'+el.avatar+'">'
								 +		'<div class="hanging-body ellipsis" style="padding: 0 .5rem">'
								 +			'<div class="ellipsis">'
								 +				'<div style="">'+el.nickname+'</div>'
								 +				'<div style="font-size: .65rem;color: #7e7e7e">数量：'+el.money+' 单价'+el.price+'</div>'
								 +				'<div style="font-size: .65rem;color: #7e7e7e">时间：'+el.addtime
								 +			'</div>'
								 +		'</div>'
								 +		'</div>'
								 +		'<div style="text-align: center">'
								 +			'<div class="blue-text">￥'+el.total+'</div>'
								 +			'<div class="click-btn small in-block blue dealbs" onclick="" data-id='+el.id+' data-type='+el.b_or_s+'>'
								 +				'买入'
								 +			'</div>'
								 +		'</div>'
								 +	'</div>'
								 +	'</div>'
								 + '</div>';
						});
						if(data.length<6){
							$('#jiazai').hide();
							html+='<div class="infinite-scroll-preloader"><fieldset style="border: none;border-top: 1px solid #e8e8e8 ;margin: 0 20px; "><legend style="padding: 0 10px">已经到底了</legend></fieldset></div>';
						}else{
							$('#jiazai').show();
						}
						off_on_sell = true
						$('#sellorder').append(html);
					}else{
						$('#sellorder').append(html);
						$('#jiazai').hide();
						webToast('没有啦');
					}
				},
				error:function(e){
					webToast('没有啦');
				},
				beforeSend:function(e){
					
				}
			});
		});
		$('body').on('click', '.dealbs', function(event) {
			id = $(this).data('id');
			$('#bsorder').data('id', id);
			$(".div_section1").show();
		});
		$('#buyorder').scroll(function() {
			console.log(22222)
			//当时滚动条离底部60px时开始加载下一页的内容
			if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
				if (off_on_by) {
					$('#buylist').click();
					off_on_by = false;
					console.log(111)
				}
				//这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
				
			}
		});
		$('#sellorder').scroll(function() {
			//当时滚动条离底部60px时开始加载下一页的内容
			if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
				if (off_on_sell) {
					$('#selllist').click();
					off_on_sell = false;
					console.log(111)
				}
				//这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
				
			}
		});
		$('#bsorder').click(function(event) {
			id = $(this).data('id');
			password = $('#passwords').val();
			$.ajax({
				type:'post',
				url : "{:url('buy_order_p')}",
				data:{id:id,password:password},
				cache:false,
				dataType:'JSON',
				success:function(data){
					$('#passwords').val('');
					webToast(data.msg);
					$(".close_btn_x").click();
					if(data.state == 0){
						window.location.reload()
					}
					console.log(data)
				},
				error:function(e){
					webToast('没有啦');
				},
				beforeSend:function(e){
					
				}
			});
		});
	})
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '价格趋势'
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data:['价格']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		
		xAxis: {
			type: 'category',
			boundaryGap: true,
			data: <?=json_encode($data['times']);?>
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name:'价格',
				type:'line',
				stack: '总量',
				data:<?=json_encode($data['prices']);?>
			}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	function accMul(arg1,arg2){
		var m=0,s1=arg1.toString(),
		s2=arg2.toString();  
		try{
		m+=s1.split(".")[1].length}catch(e){}  
		try{
		m+=s2.split(".")[1].length}catch(e){}
		return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
	}

</script>

</html>
